<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五棵树镇中学日报测试展示版本</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "微软雅黑", "PingFang SC", sans-serif;
        }

        body {
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }

        .header {
            background-color: #e53935;
            border-bottom: 1px solid #e9ecef;
            padding: 12px 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .top-bar {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .logo {
            max-height: 70px;
            width: auto;
        }

        .date-info {
            color: white;
            font-size: 13px;
        }

        .menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: white;
        }

        .nav {
            background-color: #e53935;
            padding: 0 15px;
            border-radius: 0 0 8px 8px;
            margin: 0 auto;
            max-width: 1200px;
        }

        .nav-list {
            display: flex;
            list-style: none;
            min-width: max-content;
        }

        .nav-list li {
            padding: 10px 12px;
            white-space: nowrap;
        }

        .nav-list a {
            color: white;
            text-decoration: none;
            font-size: 15px;
            transition: opacity 0.3s;
        }

        .nav-list a:hover {
            opacity: 0.9;
        }

        .announcement {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background: #fff9e6;
            border: 2px solid #ffd700;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(255, 215, 0, 0.15);
            position: relative;
        }

        .announcement::before {
            content: "📢";
            position: absolute;
            top: -15px;
            left: -15px;
            font-size: 24px;
            background: #fff9e6;
            border: 2px solid #ffd700;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .announcement-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px dashed #ffd700;
        }

        .announcement-title {
            font-size: 22px;
            color: #d4af37;
            font-weight: bold;
        }

        .announcement-time {
            color: #8b4513;
            font-size: 14px;
        }

        .announcement-content {
            font-size: 16px;
            color: #5a4a42;
            margin-bottom: 15px;
        }

        .announcement-content p {
            margin-bottom: 12px;
            text-indent: 2em;
        }

        .announcement-highlight {
            background: #fffacd;
            padding: 12px;
            border-radius: 6px;
            border-left: 4px solid #ffd700;
            margin: 15px 0;
        }

        .announcement-signature {
            text-align: right;
            color: #8b4513;
            font-size: 14px;
            font-style: italic;
        }

        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 15px;
            display: grid;
            grid-template-columns: 3fr 1fr;
            gap: 20px;
        }

        .news-section {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            margin-bottom: 20px;
        }

        .section-title {
            font-size: 19px;
            font-weight: bold;
            margin-bottom: 14px;
            padding-bottom: 7px;
            border-bottom: 3px solid #e53935;
            color: #c62828;
        }

        .news-list {
            list-style: none;
        }

        .news-list li {
            margin-bottom: 10px;
            padding-left: 18px;
            position: relative;
            padding-bottom: 10px;
            border-bottom: 1px dashed #eee;
        }

        .news-list li:last-child {
            border-bottom: none;
        }

        .news-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 7px;
            width: 7px;
            height: 7px;
            background-color: #e53935;
            border-radius: 50%;
        }

        .news-list a {
            color: #333;
            text-decoration: none;
            font-size: 15px;
            transition: color 0.3s;
            display: block;
            font-weight: 500;
            target: "_blank";
        }

        .news-list a:hover {
            color: #e53935;
        }

        .news-date {
            font-size: 12px;
            color: #777;
            margin-top: 4px;
        }

        .sidebar {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }

        .side-section h4 {
            font-size: 16px;
            color: #c62828;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px solid #e53935;
        }

        .side-item {
            padding: 8px 0;
            border-bottom: 1px dashed #eee;
        }

        .side-item:last-child {
            border-bottom: none;
        }

        .side-item a {
            color: #555;
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s;
        }

        .side-item a:hover {
            color: #e53935;
        }

        .source-code {
            display: none;
            background: #2d2d2d;
            color: #f8f8f2;
            padding: 20px;
            border-radius: 8px;
            margin: 20px auto;
            max-width: 1200px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.5;
            white-space: pre;
        }

        .footer {
            background: #1a237e;
            color: #fff;
            padding: 30px 0;
            margin-top: 40px;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px;
        }

        .footer-section {
            flex: 1;
            min-width: 160px;
        }

        .footer-title {
            font-size: 15px;
            margin-bottom: 15px;
            font-weight: 600;
            color: #64b5f6;
        }

        .footer-links {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .footer-links a {
            color: #e3f2fd;
            text-decoration: none;
            font-size: 13px;
            transition: color 0.3s;
        }

        .footer-links a:hover {
            color: #bbdefb;
        }

        .copyright {
            text-align: center;
            padding-top: 20px;
            margin-top: 20px;
            border-top: 1px solid rgba(255,255,255,0.1);
            font-size: 12px;
            color: #90caf9;
            width: 100%;
        }

        @media (max-width: 768px) {
            .container {
                grid-template-columns: 1fr;
            }
            
            .top-bar {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            .menu-btn {
                display: block;
                position: absolute;
                top: 15px;
                right: 15px;
            }
            
            .nav {
                display: none;
                position: absolute;
                top: 60px;
                left: 0;
                right: 0;
                z-index: 100;
                border-radius: 0;
            }
            
            .nav.active {
                display: block;
            }
            
            .nav-list {
                flex-direction: column;
            }
            
            .nav-list li {
                padding: 12px 15px;
                border-bottom: 1px solid rgba(255,255,255,0.1);
            }
            
            .announcement {
                margin: 10px;
                padding: 15px;
            }
            
            .announcement-title {
                font-size: 20px;
            }
            
            .announcement-content {
                font-size: 15px;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="top-bar">
            <div class="logo-container">
                <img src="https://s21.ax1x.com/2025/09/11/pVWAS0g.png" alt="五棵树镇中学日报" class="logo">
                <div class="date-info" id="current-date">
                    <!-- 日期将由JavaScript动态填充 -->
                </div>
            </div>
            <button class="menu-btn">☰</button>
        </div>
        <nav class="nav" id="mainNav">
            <ul class="nav-list">
                <li><a href="index.html" id="home-link">首页</a></li>
                <li><a href="#" id="source-link">源码</a></li>
            </ul>
        </nav>
    </header>

    <div class="announcement">
        <div class="announcement-header">
            <h2 class="announcement-title">八年二班"新生代文学社"正式成立，青春笔耕路自此启航</h2>
            <div class="announcement-time">2025年9月11日</div>
        </div>
        <div class="announcement-content">
            <p>本报讯（记者：蔡春霞  八年二班语文教师、文学社社长）</p>
            <p>近日，五棵树镇中学校八年二班"新生代文学社"将正式宣告成立，为班级热爱文学的同学们搭建起一片展现才华、交流思想的崭新平台。</p>
            <p>作为文学社社长，我深感荣幸能与同学们共同开启这段文学之旅。目前，文学社社员招募工作已正式启动，期待班级中每一位对文字抱有热情、渴望用笔墨记录生活与思考的同学积极加入，让我们以文会友，共赴热爱。</p>
            <div class="announcement-highlight">
                <p>为方便社员沟通交流与作品分享，班级同学已搭建专属微信群。后续，每位社员将围绕新学期开学、体考、为庆祝中国抗日战争暨世界反法西斯战争胜利80周年阅兵，以及文学社成立等主题撰写新闻稿，并统一发送至群内。待作品收集完毕后，将由初天博同学负责制作公众号网页，集中展示大家的文字成果，让这份青春的文学印记得以更广泛地呈现与留存。</p>
            </div>
            <p>未来，"新生代文学社"将以激发创作热情、提升文学素养为目标，陪伴同学们在文字世界中成长。</p>
        </div>
        <div class="announcement-signature">
            —— 五棵树镇中学日报 编辑部
        </div>
    </div>

    <div class="container">
        <div class="main-content">
            <section class="news-section">
                <h3 class="section-title">测试</h3>
                <ul class="news-list">
                    <li>
                        <a href="news-detail.html?newsId=1" target="_blank">测试</a>
                        <div class="news-date">2025-09-10</div>
                    </li>
                    <li>
                        <a href="news-detail.html?newsId=2" target="_blank">测试</a>
                        <div class="news-date">2025-09-09</div>
                    </li>
                    <li>
                        <a href="news-detail.html?newsId=3" target="_blank">测试</a>
                        <div class="news-date">2025-09-08</div>
                    </li>
                    <li>
                        <a href="news-detail.html?newsId=4" target="_blank">测试</a>
                        <div class="news-date">2025-09-07</div>
                    </li>
                    <li>
                        <a href="news-detail.html?newsId=5" target="_blank">测试</a>
                        <div class="news-date">2025-09-06</div>
                    </li>
                </ul>
            </section>

            <section class="news-section">
                <h3 class="section-title">测</h3>
                <ul class="news-list">
                    <li>
                        <a href="news-detail.html?newsId=6" target="_blank">测试</a>
                        <极简版>
                        <div class="news-date">2025-09-10</div>
                    </li>
                    <li>
                        <a href="news-detail.html?newsId=7" target="_blank">测试</a>
                        <div class="news-date">2025-09-09</div>
                    </li>
                    <li>
                        <a href="news-detail.html?newsId=8" target="_blank">测试</a>
                        <div class="news-date">2025-09-08</div>
                    </li>
                </ul>
            </section>
        </div>

        <aside class="sidebar">
            <div class="side-section">
                <h4>测试</h4>
                <div class="side-item"><a href="news-detail.html?newsId=9" target="_blank">测试</a></div>
                <div class="side-item"><a href="news极简版>
                <div class="side-item"><a href="news-detail.html?newsId=11" target="_blank">测试</a></div>
            </div>

            <div class="side-section">
                <h4>测试</h4>
                <div class="side-item"><a href="news-detail.html?newsId=12" target="_blank">测试</a></div>
                <div class="side-item"><a href="news-detail.html?newsId=13" target="_blank">测试</a></div>
            </div>
        </aside>
    </div>

    <div class="source-code" id="sourceCode">
        <!-- 源码将在这里显示 -->
    </div>

    <footer class="footer">
        <div class="footer-content">
            <div class="footer-section">
                <div class="footer-title">关于我们</div>
                <div class="footer-links">
                    <a href="#">天博科技-</a>
                    <a href="#"></a>
                    <a href="#"></a>
                </div>
            </div>
            
            <div class="footer-section">
                <div class="footer-title">联系我们</div>
                <div class="footer-links">
                    <a href="index.html">返回首页</a>
                    <a href="#">编辑团队：初天博、徐志远</a>
                    <a href="#">投稿指南:向老师提问</a>
                    <a href="#">联系方式15943624006</a>
                </div>
            </div>
            
            <div class="copyright">
                © 2025 五棵树镇中学日报 版权所有 |初天博制作
            </div>
        </div>
    </footer>

    <script>
        // 移动端菜单切换
        document.querySelector('.menu-btn').addEventListener('click', function() {
            const nav = document.getElementById('mainNav');
            nav.classList.toggle('active');
        });
        
        // 源码显示功能
        document.getElementById('source-link').addEventListener('click', function(e) {
            e.preventDefault();
            
            document.querySelector('.container').style.display = 'none';
            document.querySelector('.announcement').style.display = 'none';
            
            const sourceCodeElement = document.getElementById('sourceCode');
            sourceCodeElement.style.display = 'block';
            
            let htmlContent = document.documentElement.outerHTML;
            htmlContent = htmlContent.replace(/<!--[\s\S]*?-->/g, '');
            sourceCodeElement.textContent = htmlContent;
        });
        
        // 首页显示功能
        document.getElementById('home-link').addEventListener('click', function(e) {
            e.preventDefault();
            document.querySelector('.container').style.display = 'grid';
            document.querySelector('.announcement').style.display = 'block';
            document.getElementById('sourceCode').style.display = 'none';
        });
        
        // 实时日期功能
        function updateDate() {
            const dateElement = document.getElementById('current-date');
            if (!dateElement) return;
            
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth() + 1;
            const day = now.getDate();
            
            // 星期数组
            const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            const weekDay = weekDays[now.getDay()];
            
            // 农历转换函数（简化版）
            function getLunarDate(year, month, day) {
                // 农历年份对应的天干地支
                const heavenlyStems = ['庚', '辛', '壬', '癸', '甲', '乙', '丙', '丁', '戊', '己'];
                const earthlyBranches = ['申', '酉', '戌', '亥', '子', '丑', '寅', '卯', '辰', '巳', '午', '未'];
                
                // 农历月份名称
                const lunarMonths = ['正月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '冬月', '腊月'];
                
                // 农历日期名称
                const lunarDays = ['初一', '初二', '初三', '初四', '初五', '初六', '初七', '初八', '初九', '初十',
                                  '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十',
                                  '廿一', '廿二', '廿三', '廿四', '廿五', '廿六', '廿七', '廿八', '廿九', '三十'];
                
                // 计算农历年份（简化算法）
                const lunarYear = heavenlyStems[(year - 4) % 10] + earthlyBranches[(year - 4) % 12];
                
                // 计算农历月份和日期（简化算法）
                // 这里使用一个简单的映射关系，实际应用中应使用更精确的算法
                const lunarMonth = lunarMonths[month - 1];
                const lunarDay = lunarDays[day - 1];
                
                return `${lunarYear}年${lunarMonth}${lunarDay}`;
            }
            
            // 获取农历日期
            const lunarDate = getLunarDate(year, month, day);
            
            // 格式化日期显示
            dateElement.innerHTML = `${year}年${month.toString().padStart(2, '0')}月${day.toString().padStart(2, '0')}日 ${weekDay}<br>农历${lunarDate}`;
        }
        
        // 页面加载时更新日期
        document.addEventListener('DOMContentLoaded', updateDate);
    </script>
</body>
</html>
